import React, { Component } from 'react';
import { AppRegistry,StyleSheet, ListView, Text, View,Image} from 'react-native';

export default class ListViewBasics extends Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        {'id':1,'author':'fantasygao','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题！','tag':'标签一','like':899,'mark':234},
        {'id':2,'author':'fantasygao','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第2个问题！','tag':'标签2','like':29,'mark':234},
        {'id':3,'author':'ggtsdo','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第3个问题！','tag':'标签3','like':499,'mark':234},
        {'id':4,'author':'liuyafer','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第4个问题！','tag':'标签4','like':859,'mark':234},
        {'id':5,'author':'alstole','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第5个问题！','tag':'标签5','like':210,'mark':234}
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1,backgroundColor:'#F5F5D5'}}>
         <View style={{height:45,backgroundColor:'black',flexDirection:'row'}}>
             <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text style={{fontSize:18,color:'white',alignSelf:'center'}}>动态</Text>
             </View>
        </View>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) =>
            <View style={styles.item}>
              <View style={styles.authorItem}>
                    <Image style={styles.personIcon} source={{uri:rowData.icon}}/>
                    <Text style={styles.author}>{rowData.author}</Text>
              </View>
              <Text style={styles.topicItem}>{rowData.topic}</Text>
              <View style={styles.likeItem}>
                  <Image style={styles.personIcon} source={require('../images/heat.png')}/>
                  <Text style={styles.like}>{rowData.like}</Text>
                  <Image style={styles.personIcon} source={require('../images/mark.png')}/>
                  <Text style={styles.like}>{rowData.mark}</Text>
              </View>
            </View>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    item:{
        flexDirection: 'row',
        borderWidth: 1,
        borderColor: 'black',
        flexDirection: 'column',
        backgroundColor:'white'
    },
    authorItem:{
        padding:10,
        height: 50,
        flexDirection: 'row',
    },
    personIcon:{
        width:30,
        height:30,
        borderWidth: 1,
        borderColor: '#F5F5F5',
    },
    author:{
        fontSize:18,
        marginLeft:10,
        lineHeight:30
    },
    topicItem:{
        padding:10,
        fontSize:16
    },
    likeItem:{
        flexDirection: 'column',
        height: 40,
        flexDirection: 'row',
        marginRight:10
    },
    like:{
        marginLeft:10,
        lineHeight:30
    }
});
